<template>
  <!-- <div> -->
  <el-sub-menu v-if="children" :index="path">
    <template #title>
      <el-icon v-if="icon" >
        <component :is="icon"></component>
      </el-icon>
      <span>{{ title }}</span>
    </template>
    <nav-item v-for="item in children" :key="item.path" :route="item" />
  </el-sub-menu>
  <!-- @ts-nocheck
<template> -->
  <el-menu-item v-else :index="path">
    <el-icon v-if="icon">
      <component :is="icon"></component>
    </el-icon>
    <span>{{ title }}</span>
  </el-menu-item>
  <!-- </template> -->
  <!-- </div> -->
</template>

<script>
export default {
  name: "navItem",
  props: {
    route: {
      type: Object,
      required: true,
    },
  },
  components: {
    // navItem,
  },
  computed: {
    children() {
      if (this.route.children) {
        return this.route.children;
      } else {
        return null;
      }
    },
    icon() {
      if (this.route.meta && this.route.meta.icon) {
        return this.route.meta.icon;
      } else {
        return false;
      }
    },
    title() {
      if (this.route.meta && this.route.meta.title) {
        return this.route.meta.title;
      } else {
        return this.route.name;
      }
    },
    name() {
      return this.route.name;
    },
    path() {
      return this.route.path;
    },
  },
  mounted() {
    // console.log(this.route);
  },
};
</script>
